<template>
  <div class="bikeDetail-wrap">
    <!--自行车详情-->

    <!--立即租赁-->
    <!--        如果没有登陆 => 跳到登录-->
    <!--        判断是否有足够库存 => 提示-->
    <!--        如果登录了 => 判断 所需积分 》 账户技分-->
    <!--        如果当前用户未还车，不能再次租赁-->
    <!--        是否正在租赁此车-->
    <!--        bike messages  status null 0 2-->
    <!-- 留言输入框【登录之后】 -->
    <!-- 留言列表 -->
    <div class="bike-detail">
      <div class="bike-img-left">
        <img :src="bike.cover" alt />
      </div>
      <div class="bike-detail-right">
        <div class="bike-title basePadding">
          {{bike.title}}
          <!-- <span style="font-size: 13px;color: indianred">(正在租赁)</span> -->
        </div>
        <div class="price-jiFen basePadding">
          <span style="color: #49AF4F">所需积分：</span>
          <span style="font-size: 20px;">{{bike.integral}}分/天</span>
        </div>
        <div class="bike-size basePadding">
          <span style="color: #888888">尺寸：</span>
          {{bike.size}}
        </div>
        <div class="bike-count basePadding">
          <span>库存：{{bike.count}}辆</span>
        </div>
        <div class="end-time basePadding">
          <span>租赁天数：</span>
          <el-input-number
            class="nums"
            v-model="day"
            size="small"
            @change="handleChange"
            :min="1"
            label="描述文字"
          ></el-input-number>
        </div>
        <div class="bike-desc basePadding">车辆详情：{{bike.intro}}</div>
        <div class="bike-type-list basePadding">
          类别：
          <el-button type="success" size="mini">{{bike.kind}}</el-button>
        </div>
        <div class="buy">
          <el-button style="width: 200px;height:40px" size="medium" type="danger" @click="buy">立即租赁</el-button>
        </div>
      </div>
    </div>
    <div class="all-desc">车辆详情：{{bike.intro}}</div>
    <div class="imagesList">
      <div class="image" v-for="(item,index) in bike.images" :key="index">
        <img :src="item" alt />
      </div>
    </div>

    <!--        留言-->
    <div class="user-message-main">
      <div class="message-intro">
        <div style="font-size: 20px; margin-bottom: 10px">留言区</div>
        <p
          class="intro-desc"
        >欢迎进入课程讨论区，你可以与本课程的老师和同学在这里交流。如果你有课程相关的问题，请发到老师答疑区；经验、思考、创意、作品、转帖请发到综合讨论区。欢迎分享，鼓励原创，杜绝广告，请大家共同维护一个包容、积极、相互支持的交流氛围，谢谢。了解更多请点击“讨论区使用规则”↗</p>
      </div>
      <div>
        <el-input style="margin: 10px 0" v-model="messageContent" placeholder="请留言"></el-input>
        <el-button type="success" @click="sendMessage">发送</el-button>
      </div>
      <div class="user-message-list">
        <div class="message-item" v-for="(item,index) in messageList" :key="index">
          <div class="user-name">{{item.userInfo.username}}</div>
          <div class="message-desc">{{item.messageInfo.content}}</div>
          <div style="float:right" @click="deleteMsg(item.messageInfo.id,index)">
            <el-button size="mini">删除</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  BASE_URL,
  getBikeDetail,
  addOrder,
  addMessage,
  delMessage
} from "../../../api";
// import config from "../../../config/index";
import { formatTime } from "../../../common/js/myFun";
import { mapState } from "vuex";
export default {
  name: "BikeDetail",
  data() {
    return {
      BASE_URL: BASE_URL,
      userId: "",
      paramsBikeId: "",
      bike_integral: "",
      bike: "",
      status: 1,
      day: 10,

      messageList: [],
      messageContent: ""
    };
  },
  mounted() {
    let body = document.documentElement || document.body;
    body.scrollTop = 0;

    if (this.userInfo2) {
      let { id } = this.userInfo2;
      this.userId = id;
    }
    this.getBikeDetail();
  },
  computed: {
    ...mapState(["userInfo2"])
  },
  methods: {
    async getBikeDetail() {
      let bikeId = this.$route.params.bikeId;
      this.paramsBikeId = bikeId;
      let getBike = await getBikeDetail({
        // userId: this.userInfo2.id,
        bikeId: bikeId
      });
      if (getBike.code === 200) {
        window.console.log(getBike);
        this.bike_integral = getBike.result.bike.integral;
        this.status = getBike.result.status;
        this.bike = this.getFirstImg(getBike.result.bike);
        this.messageList = getBike.result.messageList;
      }
    },
    //提出第一张图片
    getFirstImg(bike) {
      let imagesArr = JSON.parse(bike.images);
      bike.cover = this.BASE_URL + imagesArr[0].file;
      bike.images = this.getImageList(bike.images);
      window.console.log(bike, "bike---getFirstImg");
      return bike;
    },
    // 提取详情图
    getImageList(images) {
      let imagesArr = JSON.parse(images);
      window.console.log(imagesArr, "imagesArr");
      let arr = [];
      imagesArr.forEach(item => {
        item.file = this.BASE_URL + item.file;
        arr.push(item.file);
      });
      return arr;
    },
    //租赁天数
    handleChange(value) {
      // eslint-disable-next-line no-console
      console.log(value);
    },
    // <!--立即租赁-->
    // <!--        如果没有登陆 => 跳到登录-->
    // <!--        判断是否有足够库存 => 提示-->
    // <!--        如果登录了 => 判断 所需积分 》 账户技分-->
    // <!--        如果当前用户未还车，不能再次租赁-->
    // <!--        是否正在租赁此车-->
    // <!--        bike messages  status null 0 2-->
    buy() {
      // let { id } = this.userInfo2;
      // this.userId = id;
      let { count, integral } = this.bike;
      if (!this.userId) {
        this.$router.push({ path: "/login" });
        return;
      }
      if (count < 1) {
        this.$message({
          message: "库存不够",
          type: "error"
        });
        return;
      }
      // if (integral * this.day > this.userInfo2.integral) {
      //   this.$message({
      //     message: "您的积分不足！请充值",
      //     type: "error"
      //   });
      //   return;
      // }
      if (this.status === 0) {
        this.$message({
          message: "您正在租赁其它车辆,请过期后再租！",
          type: "error"
        });
        return;
      }
      if (this.status === 2) {
        this.$message({
          message: "您有逾期未处理",
          type: "error"
        });
        return;
      }
      let needIntegral = integral * this.day;
      let endAt = formatTime(
        this.day * 60 * 60 * 1000 * 24 + new Date().getTime()
      );
      // window.console.log(
      //   endAt,
      //   this.day,
      //   parseInt(this.day * 60 * 60 * 1000) + new Date().getTime(),
      //   new Date().getTime(),
      //   "endAt"
      // );

      this.$confirm("是否立即租赁?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          addOrder({
            userId: this.userId,
            bikeId: this.paramsBikeId,
            integral:needIntegral,
            endAt
          }).then(res => {
            this.getBikeDetail();
            if (res.code === 200) {
              this.$message({
                message: res.data,
                type: "success"
              });
            } else {
              this.$message({
                message: res.data,
                type: "error"
              });
            }
            window.console.log(res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 发送留言
    sendMessage() {
      if (!this.userId) {
        this.$router.push({ path: "/login" });
        return;
      }
      addMessage({
        userId: this.userId,
        content: this.messageContent,
        bikeId: this.paramsBikeId
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.data,
            type: "success"
          });
          this.getBikeDetail();
        }
      });
    },
    // 删除留言
    deleteMsg(id, index) {
      delMessage({
        messageId: id
      }).then(res => {
        if (res.code === 200) {
          this.messageList.splice(index, 1);
          this.$message({
            message: res.data,
            type: "success"
          });
        } else {
          this.$message({
            message: res.data,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.bikeDetail-wrap {
  min-height: 1000px;
  padding-top: 20px;
  background-color: #EEEEEE;
}

.bike-detail {
  width: 1200px;
  height: 350px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;

  .bike-img-left {
    float: left;
    width: 480px;
    height: 350px;
    padding: 20px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      box-shadow: 0 0px 3px 1px #ccc;
      object-fit: cover;
      overflow: hidden;
      transition: all 0.3s;
    }

    img:hover {
      transform: scale(1.13);
    }
  }

  .bike-detail-right {
    width: 700px;
    float: left;
    padding: 20px;

    .basePadding {
      padding-bottom: 12px;
    }

    .bike-title {
      font-size: 23px;
      width: 100%;
      height: 40px;
      overflow: hidden;
    }

    .price-jiFen {
    }

    .bike-desc {
      height: 32px;
      line-height: 30px;
      overflow: hidden;
    }

    .bike-size {
    }

    .end-time {
      .nums {
        margin-left: 10px;
      }
    }

    .bike-type-list {
    }
  }
}

.all-desc {
  width: 1200px;
  margin: 30px auto;
}

.imagesList {
  width: 1200px;
  margin: 30px auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-shadow: 0 0px 3px 1px #ccc;

  .image {
    margin: 10px 10px;
    width: 580px;
    height: 580px;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}

.user-message-main {
  width: 1200px;
  min-height: 400px;
  border-radius: 5px;
  margin: 20px auto;
  padding: 30px;
  background-color: #fff;
}

.message-intro {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;

  .intro-desc {
  }
}

.user-message-list {
  .message-item {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid #eee;

    .user-name {
      font-size: 13px;
      color: #49AF4F;
      padding: 10px 0;
    }
  }
}
</style>
